<template>
  <div class="projects">
    <project
        v-for="(project, idx) in projectList"
        :key="`${idx}`"
        :titles="titles"
        :project="project"
    />
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import Project from '../components/Project.vue'
export default Vue.extend({
  name: 'Projects',

  data () {
    return {
      titles: {},
      projectList: {}
    }
  },

  components: {
    Project
  },

  methods: {
    async reqProjectList() {
      console.log(this)
      const result: { titles: [], list: [] } = await Vue.prototype.$ajax.get('/projects').then((data: {}) => JSON.parse(JSON.stringify(data)).data["zh"])
      this.titles = {...this.titles, ...result.titles};
      this.projectList = {...this.projectList, ...result.list};
    }
  },

  created(){
    this.reqProjectList()
  }
})
</script>

<style lang="scss" scoped>

</style>